<template>
	<view class="main" :key="refreshKey">
		<uv-tabs :list="tabItems" keyName="label" :scrollable="false" :current="currentTab" @change="changeTab"
			:activeStyle="{ color: '#E1BC31', fontSize: '28rpx', fontWeight: 600 }"
			:inactiveStyle="{ color: '#8C949D', fontSize: '28rpx', fontWeight: 400 }"
			lineColor="#E4D494"
			></uv-tabs>
		<view class="no-data animate__fadeInDown" v-show="noDataFlag" style="animation-duration: 2s;">
			<uv-empty text="暂无记录" mode="list"></uv-empty>
		</view>
		<view class="orders animate__fadeInDown" style="animation-duration: 2s;">
			<view v-for="(order,index) in orders" :key="index">
				<view class="order"  @click="orderDetailPage(order)">
					<view class="order-item-flex">
						<text class="order-section1-l-txt-sell">充值 {{ order.rechargeChannel.rechargeWay == 2 ? '' : '' }}</text>
						<text class="to-the-account">{{ '+' + formatNumber(order.toTheAccount ||
							0) }}</text>
					</view>
					<view class="order-item-flex">
						<view>
							<view class="order-section3" style="margin-top: 24rpx;">
								时间: {{ order.submitTime }}
							</view>
							<view class="order-section3" style="margin-top: 16rpx;">
								订单号: {{ order.orderNo }}
							</view>
						</view>
						<view class="order-section1-r order-section1-n" :class="{'order-section1-h': order.stateName == '充值成功'}">{{order.stateName}}</view>
					</view>
				</view>
				<view v-if="!(index == orders.length - 1)" style="height: 2rpx;width: 622rpx;margin-left: 32rpx;background: rgba(255,255,255,0.1);"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabItems: [{
				label: '全部',
				value: ''
			}, {
				label: '处理中',
				value: '1'
			}, {
				label: '已完成',
				value: '2'
			}],
			currentTab: 0,
			keyword: '',
			orders: [],
			amount: '',
			pageNum: 1,
			loadingState: 'loadmore',
			pullDownRefreshFlag: false,
			noDataFlag: false,
			refreshKey:0
		}
	},
	onLoad() { },
	onShow() {
		this.refreshData();
		this.refreshKey += 1;
	},
	onReachBottom() {
		this.nextPage();
	},
	onPullDownRefresh() {
		this.pullDownRefreshFlag = true;
		this.refreshData();
	},
	methods: {
		formatNumber(number) {
			return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			},
		changeTab(currentTab) {
			this.currentTab = currentTab.index;
			this.refreshData();
		},

		orderDetailPage(order) { },

		refreshData() {
			this.pageNum = 1;
			this.orders = [];
			this.loadingState = 'loading';
			this.findOrderRecord();
		},

		nextPage() {
			if (this.loadingState == 'nomore') {
				return;
			}
			this.pageNum = this.pageNum + 1;
			this.findOrderRecord();
		},

		findOrderRecord() {
			var that = this;
			var queryParam = {
				pageSize: 10,
				pageNum: that.pageNum,
				state: that.tabItems[that.currentTab].value,
				orderNo: that.keyword
			};
			that.loadingState = 'loading';
			uni.$uv.http.get('/memberRecharge/findRechargeRecordByPage', {
				params: queryParam
			}).then(res => {
				var newOrders = res.data.content;
				var totalPage = res.data.totalPage;
				if (that.pullDownRefreshFlag) {
					that.pullDownRefreshFlag = false;
					uni.stopPullDownRefresh();
				}
				if (newOrders.length == 0) {
					that.loadingState = 'nomore';
				}
				if (totalPage == that.pageNum) {
					that.loadingState = 'nomore';
				}
				var oldOrders = that.orders;
				for (var i = 0; i < newOrders.length; i++) {
					var flag = true;
					for (var j = 0; j < oldOrders.length; j++) {
						if (newOrders[i].id == oldOrders[j].id) {
							flag = false;
							break;
						}
					}
					if (flag) {
						oldOrders.push(newOrders[i]);
					}
				}
				that.noDataFlag = that.orders.length == 0;
			});
		},
	}
}
</script>

<style>
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
.main{
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
}

.no-data {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400rpx;
}

.search-keyword {
	padding: 16rpx 32rpx;
}

.order-item-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text-avatar {
	height: 50rpx;
	width: 50rpx;
	border-radius: 50rpx;
	line-height: 50rpx;
	text-align: center;
	color: white;
	margin-right: 12rpx;
	background-color: rgb(41, 121, 255);
}

.text-avatar2 {
	background-color: #39496a;
}

.slot-content {
	background-color: white;
}

.dropdown-amount-input {
	padding-left: 32rpx;
	padding-right: 32rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.dropdown-btns {
	display: flex;
}

.dropdown-btn {
	flex: 1;
}

.trade-type-tab {
	display: flex;
	justify-content: space-between;
	color: white;
	padding-top: 30rpx;
	align-items: center;
}

.trade-type-tab-l {
	display: flex;
	flex: 2;
	justify-content: space-around;
	align-items: flex-end;
}

.trade-type {
	color: #ccc;
	font-size: 28rpx;
}

.trade-type-activated {
	color: white;
	font-size: 44rpx;
}

.trade-type-r {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	padding-right: 32rpx;
}

.my-order-record {
	padding-right: 40rpx;
}

.payment-received-info {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.info-section1 {
	display: flex;
	align-items: center;
}

.payment-received-info-txt {
	flex: 1;
}

.type-name {
	padding-bottom: 14rpx;
}

.info-detail {
	color: #888;
	font-size: small;
}

.info-icon {
	margin-right: 14rpx;
}

.buy-all {
	color: #007aff;
}

.buy-bottom-tip {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 40rpx;
}

.buy-amount-unit {
	color: black;
}

.buy-modal {
	padding-left: 32rpx;
	padding-right: 32rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.modal-title {
	display: flex;
	justify-content: space-between;
}

.buy-txt {
	font-weight: bold;
}

.close-buy-txt {
	color: #909399;
}

.orders {
	/* padding-bottom: 20rpx; */
	margin: 32rpx;
	background: #FFF;
	border-radius: 28rpx;
}

.order {
	padding: 32rpx;
}

.order-section1 {
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
}

.order-section1-l {
	display: flex;
	align-items: center;
}

.order-section1-r {
	font-size: 24rpx;
	padding: 8rpx 20rpx;
	border-radius: 22rpx 22rpx 22rpx 22rpx;
	
}

.order-section1-h{
	color: #E4D494 !important;
	background: rgba(228,212,148,0.1) !important;
}

.order-section1-n{
	color: rgba(255,255,255,0.4);
	background: rgba(255,255,255,0.1);
}

.text-avatar {
	height: 50rpx;
	width: 50rpx;
	border-radius: 50rpx;
	line-height: 50rpx;
	text-align: center;
	color: white;
	margin-right: 12rpx;
	background-color: rgb(41, 121, 255);
}

.text-avatar2 {
	background-color: #39496a;
}

.unit-price {
	font-size: smaller;
	padding-top: 16rpx;
}

.order-section2 {
	font-size: 26rpx;
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
	align-items: center;
}

.order-section2-l {
	display: flex;
	align-items: center;
	color: #909399;
}

.order-section2-r {
	color: black;
	font-size: smaller;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-section3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #909399;
	font-size: 24rpx;
}

.order-section3-l {
	margin-top: 16rpx;
	font-size: 20rpx;
	color: rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
}

.receipt-payment-type-icon {
	margin-right: 14rpx;
}

.order-section1-l-txt-sell {
	font-size: 32rpx;
	color: #000;
	font-weight: bold;
}

.order-section1-l-txt-buy {
	font-size: 32rpx;
	color: green;
	font-weight: bold;
}

.to-the-account {
	color: #E4D494;
	font-size: 32rpx;
	font-weight: bold;
}

.order-section1-l-txt2 {
	font-size: 28rpx;
	padding-left: 8rpx;
	color: black;
}

.buy-btn {
	height: 50rpx;
	line-height: 50rpx;
}

.trade-tip {
	background-color: #2979ff;
	color: white;
	padding-bottom: 32rpx;
	padding-top: 20rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
}

.trade-tip-title {
	display: flex;
	justify-content: center;
}

.trade-tip-content {
	font-size: 20rpx;
	line-height: 1.8;
}
</style>